<template>
  <div class="container">
    <div class="main">
			<div class="traingplan">
				<dl v-for="(item, index) in tableData" :key="index" class="traingplan-group">
					<dt>
					<div class="traingplan-img-group">
						<img :src="item.appCoverUrl" />
					</div>
					<p class="title">名称：{{item.title}}</p>
          <p style="display:flex;align-items: center;justify-content: space-between;padding:4px 10px;font-size:14px;color:#888;">
						<span>名称：{{item.title}}</span>
						<span>下载：{{item.title}}</span>
					</p>
					<p style="display:flex;align-items: center;justify-content: flex-end;padding:4px 10px;">
						<el-button size="mini" type="danger" icon="el-icon-download" style="padding-right:20px;">下载</el-button>
					</p>
					</dt>
				</dl>
        </div>
        <div class="pagination">
              <el-pagination
                  layout="sizes,total, prev, pager, next, jumper"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :page-sizes="[10,20, 50, 100, 150, 200]"
                  @size-change="handleSizeChange"
                  :total="query.total"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
          <div class="detail-title">金桥集团年度会议记录</div>
          <div class="detail-text">对游戏玩家来说，无论是团队FPS、MOBA竞技还是生存类游戏，稳定、低延迟是获胜的关键。我们准备了有保障的联机加速服务，让玩家们在每场游戏竞技中斩获高分。我们不止于认真，更在乎你的输赢。</div>
      </div>
    <div class="main-left">
      <div class="main-left-top">
        <div class="main-list-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="main-list-title">素材格式:</div>
                </el-col>
                <el-col :span="12">
                  <div class="main-list-res">mp4</div>
                </el-col>
            </el-row>
        </div>
        <div class="main-list-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="main-list-title">素材大小:</div>
                </el-col>
                <el-col :span="12">
                  <div class="main-list-res">mp4</div>
                </el-col>
            </el-row>
        </div>
        <div class="main-list-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="main-list-title">素材像素:</div>
                </el-col>
                <el-col :span="12">
                  <div class="main-list-res">mp4</div>
                </el-col>
            </el-row>
        </div>
      </div>
      <div class="main-left-bottom" style="border-top:1px dashed #eee;">
        <div class="main-list-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="main-list-title">上传者:</div>
                </el-col>
                <el-col :span="12">
                  <div class="main-list-res">mp4</div>
                </el-col>
            </el-row>
        </div>
        <div class="main-list-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="main-list-title">上传时间:</div>
                </el-col>
                <el-col :span="12">
                  <div class="main-list-res">mp4</div>
                </el-col>
            </el-row>
        </div>
        <div class="main-list-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="main-list-title">标签:</div>
                </el-col>
                <el-col :span="12">
                  <div class="main-list-res">
                    <el-button size="small">张三</el-button>
                  </div>
                </el-col>
            </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import notFind from "@/view/common/notFind";
export default {
  name: "active",
  components: {
    notFind,
  },
  data() {
    return {
      searchList: [],
      tableData: [1],
      keyword:'',
      fileType:'',
      loading: false,
      finished: false,
      error: false,
      query: {
        pageIndex: 1,
        pageSize: 20,
        uid: "",
        page: 1,
        type_hdlb: "展期活动",
        exhibition_id: window.sessionStorage.getItem("jcs_exhibition_id"),
      },
      page: 1,
      header_log: "",
      imgPath: this.$API.CrmImagesUrl,
    };
  },
  created() {
    // this.initAjaxMethod();
    // this.otherAjaxMethod();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageSize=val;
    },
    handlePageChange(val){
      this.query.pageIndex=val;
    },
    onSubmit(){

    },
    handleSearch(){

    },
    resultClick(){

    },
    initAjaxMethod() {
        this.$http.post(this.$API.RESOURCE_INDEX, {
          pageIndex: this.query.pageIndex,
          pageSize: this.query.pageSize,
        })
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            this.tableData = list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    otherAjaxMethod(){
      this.$http.post(this.$API.RESOURCE_SEARCH_INDEX)
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data) ? res.data : [];
            list.forEach(item=>{
              item.checkResult=[];
            })
            this.searchList = list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    }
  },
};
</script>
<style lang="less" scoped>
.container{
  display: flex;
  height: 100%;
  .main{
    width: 70%;
    height: 100%;
    background: #fafafa;
    padding:20px;
  }
  .main-left{
    width:30%;
    height:100%;
    padding:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .main-left-top{
      padding:20px;
      width:100%;
    }
    .main-left-bottom{
      padding:20px;
      width:100%;
    }
    .main-list-group{
      padding:6px 0;
      .main-list-title{
        font-size: 15px;
        color:#333;
        font-weight: bold;
        text-align: right;
        height: 24px;
        line-height: 24px;
      }
      .main-list-res{
        font-size: 14px;
        color:#444;
        height: 24px;
        line-height: 24px;
      }
    }
  }
  .detail-title{
    font-size: 20px;
    font-weight: bold;
    color:#333;
  }
  .detail-text{
    font-size: 16px;
    line-height: 30px;
    color:#333;
    margin-top:10px;
  }
}
.traingplan {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.traingplan .traingplan-group {
  width: 25%;
  padding:10px;
  box-sizing: border-box;
}
.traingplan dt {
  background: #ffffff;
  box-shadow: 0 12px 20px 0 rgba(0,0,0,.2);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0;
}
.traingplan dt:hover{
  cursor: pointer;
  box-shadow:
   1px 1px 8px 4px rgba(0, 0, 0, 0.4);
}
.traingplan dl img {
  width: 100%;
  height: 160px;
  object-fit:cover
}
.traingplan dd {
  margin-top: 5px;
  font-size: 13px;
}
</style>


